<template>
  <div class="story">
    <el-row :gutter="10">
      <el-col>
        <div class="title-h-container">
          <h1 class="title-h">感谢抗疫英雄们作出的伟大贡献</h1>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :key="key">
        <Card v-for="(v,index) in modules" :key="index" :domain="v"></Card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getAllPicture } from "@/api/module_picture";
import Card from "@/components/myCard";
import { selectModuleById } from "@/api/module";

export default {
  components: {
    Card,
  },
  data() {
    return {
      total: "",
      page: 1,
      size: 100,
      modules: [],
      key: -1,
    };
  },
  mounted() {
    selectModuleById(2, this.page, this.size).then((res) => {
      this.modules = res.data.modules;
      this.total = res.data.total;
      this.getAllUrls();
    });
  },
  methods: {
    getAllUrls() {
      this.$http
        .all([
          this.modules.forEach((value,index) => {
            getAllPicture(value.id).then((res) => {
              if (res.data.modulePictures[0]) {
                value["url"] = res.data.modulePictures[0].modulePicturepath;
              } else {
                value["url"] = "";
              }
              this.$set(this.modules[index],value)
            });
          }),
        ])
        .then(
          this.$http.spread(() => {
            
            
          })
        );
    },
  },
};
</script>
<style>
.title-h-container {
  display: flex;
  justify-content: center;
}
.title-h {
  border-right: black solid 0.1em;
  font-size: 50px;
  width: 15em;
  height: 1.5em;

  color: black;
  float: left;
  align-self: center;
  justify-self: center;

  white-space: nowrap;
  overflow: hidden;
  font-weight: normal;

  /*padding-left: 29.2%;*/

  animation: type 8s steps(15, end) 5s infinite, guangbiao 1s steps(1) infinite;
}
.story .time {
  font-weight: 100;
  position: absolute;
  bottom: 0;
  white-space: nowrap;
}
.story .title {
  font-weight: 900;
}
.story {
  text-align: left;
}

@keyframes type {
  0% {
    width: 0;
  }
  87.5% {
    width: 15em;
  }
  100% {
    width: 0;
  }
}

@keyframes guangbiao {
  50% {
    border-color: transparent;
  }
}
</style>